<template>
    <div class="setting-item-container">
        <div class="setting-item-label">{{ props.label }}</div>
        <div class="setting-item-content">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import {defineProps} from "vue";

const props = defineProps({
    label: String,
})
</script>

<style scoped lang="less">
.setting-item-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 18px;

    .setting-item-label {
        text-align: right;
        padding-right: 12px;
    }

    .setting-item-content {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
    }
}
</style>